import React, { useReducer } from 'react'

export default function ReducerCom() {
  //使用 useReducer 函数  state 用来接收当前状态值的参数, 
  // action 是对状态进行更新的『数据对象』, 示例: {type: 'add', payload: 1}  type 类型  payload 载荷
  // {type: 'add', payload: 1}  {type: 'sub', payload: 1}
  // state 变量用来接收内部创建的状态值, dispatch 单词本意是『分发任务』, 作用更新内部状态
  let [state, dispatch] = useReducer((state, action) => {
    //根据 action 对 state 数据进行更新
    switch(action.type){
      // 回调函数的返回值, 将用来更新 state 数据
      case 'add':
        return state + action.payload;
      case 'sub':
        return state - action.payload;
      default:
        //如果是其他的 type 值则不会 state 进行更新
        return state;
    }
  }, 0);

  return (
    <div>
      <h2>{state}</h2>
      <button onClick={() => {
        dispatch({type: 'add', payload: 5});
      }}>新增</button>
      <button onClick={() => {
        dispatch({type: 'sub', payload: 2});
      }}>减少</button>
    </div>
  )
}
